<template>
  <div class="nav-menu-box">
    <el-menu
      router
      :default-active="currentMenu"
      :collapse="isCollapse"
      :collapse-transition="false"
      @select="selectMenu">
      <el-menu-item
        v-for="item of routes"
        :key="item.path"
        :index="item.path"
        :title="isCollapse && item.path">
        <i class="el-icon-s-marketing"></i>
        <span>{{ item.path }}</span>
      </el-menu-item>
    </el-menu>
    <div class="change-collapse-box" @click="changeCollapseFn">
      <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
  </div>
</template>

<script>
import { childrenRouter as routes } from '@/router/constant-router';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'navMenu',
  data() {
    return {
      routes,
      currentMenu: null
    };
  },
  computed: {
    ...mapState('pageModule', ['isCollapse'])
  },
  watch: {
    $route: {
      handler(newVal) {
        if (newVal && newVal?.path) {
          let ary = newVal?.path.split('/');
          this.currentMenu = ary[ary.length - 1];
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapMutations('pageModule', ['changeCollapse']),
    selectMenu(menu) {
      this.currentMenu = menu;
    },
    changeCollapseFn() {
      this.changeCollapse(!this.isCollapse);
    }
  }
};
</script>

<style lang="scss" scoped>
.nav-menu-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  ::v-deep .el-menu {
    overflow-y: auto;
    flex: 1;
    .el-menu-item {
      span {
        vertical-align: top;
      }
    }
  }
  .change-collapse-box {
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background-color: #eee;
  }
}
</style>
